<template>
  <div class="box">
    <div class="top">
      <div class="nm">{{ item?.title }}</div>
      <div v-if="item.sellPrice !== ''" class="sell">
        <b>{{ item?.price?.n }}</b> 元起
      </div>
      <div v-if="item?.price?.n == ''"></div>
    </div>
    <div class="bottom">
      <div class="addr">{{ item?.location }}</div>
      <div class="zhek">
        <div
          class="service"
          v-for="(ser, serindex) in item?.services.slice(0, 4)"
          :key="serindex"
        >
          <p>{{ ser.text }}</p>
        </div>
      </div>
      <div class="service" v-if="item.sellPrice == ''"></div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  item: {
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.box {
  margin: 15rem 0 10rem 20rem;
  border-bottom: 1rem solid #eee;
  .top {
    display: flex;
    font-size: 16rem;
    margin-bottom: 5rem;
    .nm {
      width: 280rem;
      color: black;
      margin-right: 5rem;
    }
    .sell {
      color: #f03d37;
      font-size: 14rem;
      b {
        font-size: 18rem;
      }
    }
  }
  .bottom {
    font-size: 14rem;
    color: #666;
    .zhek {
      display: flex;
      .service {
        margin: 5rem 0 5rem 0;
        p {
          margin-right: 5rem;
          padding: 2rem 4rem;
          transform: scale(0.8, 0.8);
        }
        &:nth-child(1)p {
          border: 1rem solid #579daf;
          color: #579daf;
        }
        &:nth-child(2)p {
          border: 1rem solid #ff9900;
          color: #ff9900;
        }
        &:nth-child(3)p {
          border: 1rem solid #ff9900;
          color: #ff9900;
        }
        &:nth-child(4)p {
          border: 1rem solid #ff9900;
          color: #ff9900;
        }
      }
    }
  }
}
</style>
